<template>
  <div>
    <h3 style="margin-left: 20px;">欢迎登录- {{ this.ShowUsername }}</h3>
    <el-card class="box-card">
      <div class="MaxBoxs">
        <div class="TwoBoxs" v-for="news in ShouNews" :key="news.id">
          <div class="TwoLeft">
            <i :class="news.icon"></i>
          </div>
          <div class="TwoRight">
            <p class="RightName">{{ news.name }}</p>
            <h2>{{ news.number }}</h2>
          </div>
        </div>
      </div>
      <div class="MAxEcharts">
        <div class="TopBoxs">
          <h4>订单统计</h4>
        </div>
        <div class="BottomEcharts">
          <div class="echartsLeft">
            <div>
              <p>本月订单总数</p>
              <h2>100</h2>
              <p class="zengzhang"><span style="color: green;">↑10%</span>同比上月</p>
            </div>
            <div>
              <p>本周订单总数</p>
              <h3>100</h3>
              <p class="zengzhang"><span style="color: red;">↓10%</span>同比上周</p>
            </div>
          </div>
          <div id="main" class="EchartsRight"></div>

        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
// import * as echarts from 'echarts';

export default {
  data() {
    return {
      ShowUsername: "",
      ShouNews: [
        {
          id: 1,
          icon: 'el-icon-document',
          name: '今日上传条数',
          number: 20
        },
        {
          id: 2,
          icon: 'el-icon-document',
          name: '今日反馈条数',
          number: 10
        },
        {
          id: 3,
          icon: 'el-icon-coin',
          name: '近7天上传条数',
          number: 10
        },
        {
          id: 4,
          icon: 'el-icon-data-line',
          name: '近7天反馈条数',
          number: 10
        }
      ]
    }
  },



  watch: {},
  mounted() {
    this.ShowUsername = localStorage.getItem('CsvUsername');
    this.myEcharts();
  },
  created() {
  },

  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
          text: '近一周订单统计',
          textStyle: {
            color: "#ccc"
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
          left: '2%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['销量']
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            // name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: 'rgb(219, 238, 252)'
            },
            emphasis: {
              focus: 'series'
            },
            data: [1, 3, 15, 65, 75, 90, 75]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }


  }
}
</script>

<style scoped>
.MaxBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.TwoBoxs {
  width: 280px;
  height: 120px;
  border: 2px solid #6bb8ff;
  background-color: #dbeefc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 1px 10px;
}

.TwoLeft {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  color: #1890ff;
}

.TwoRight {
  width: 70%;

  .RightName {
    color: #999999;
  }
}

.MAxEcharts {
  width: 90%;
  margin: 50px 0px 20px 0px;
  box-sizing: border-box;
  display: flex;
  /* align-items: fl; */
  justify-content: space-between;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.TopBoxs {
  width: 100%;
  height: 5%;
  background-color: #a5d4ff;
  box-sizing: border-box;
  padding: 15px;

  h4 {
    margin: 0px 20px;
    box-sizing: border-box;
  }
}

.BottomEcharts {
  width: 100%;
  display: flex;
  /* align-items: center; */
  /* justify-content: space-between; */
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-top: 20px;
  box-sizing: border-box;
}

.echartsLeft {
  width: 10%;
  display: flex;
  flex-direction: column;
  margin: 10px 20px;
  box-sizing: border-box;
 
  .zengzhang{
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #ccc;
  }
  div{
    margin-bottom: 30px;
  }
}

.EchartsRight {
  width: 75%;
  height: 400px;
}
</style>